<template>
  <footer class="footer">
    <nav class="nav" :class="$route.path === path.left ? className.left : 'left'" @click="$router.push(path.left)">
      <span class="left-title">园区一张图</span>
    </nav>
    <nav class="nav" :class="$route.path === path.center ? className.center : 'center'" @click="$router.push(path.center)">
      <span class="center-title">产业一张图</span>
    </nav>
    <nav class="nav" :class="$route.path === path.right ? className.right : 'right'" @click="$router.push(path.right)">
      <span class="right-title">重点项目一张图</span>
    </nav>
  </footer>
</template>

<script setup lang="ts" name="NavBar">
const path = {
  left:'/bigScreen/screenB/left',
  center:'/bigScreen/screenB/center',
  right:'/bigScreen/screenB/right'
}

const className = {
  left:'left-active bounce-top',
  center:'center-active bounce-top',
  right:'right-active bounce-top'
}
</script>

<style scoped lang="less">
.footer{
  width: 740px;
  height: 45px;
  position: absolute;
  bottom: 38.69px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  .nav{
    width: 250px;
    height: 100%;
    color: #ededed;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    .left-title{
      margin-left: 132.76px;
    }
    .center-title{
      margin-left: 92px;
    }
    .right-title{
      margin-left: 42px;
    }
  }
  .left{
    background-image: url(../assets/left.svg);
  }
  .left-active{
    transition: all 1s;
    background-image: url(../assets/left-active.svg);
  }
  .center{
    background-image: url(../assets/center.svg);
  }
  .center-active{
    transition: all 1s;
    background-image: url(../assets/center-active.svg);
  }
  .right{
    background-image: url(../assets/right.svg);
  }
  .right-active{
    transition: all 1s;
    background-image: url(../assets/right-active.svg);
  }
}
</style>
